<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>慕课网右侧功能弹出列表</title>
	<style>
		body {
			font-size: 12px;
			margin: 0;
			padding: 0;
			font-family: 'Microsoft yahei';
		}

		ul {
			padding: 0;
			list-style-type: none;
			margin: 0;
		}

		#video {
			margin: 10px 0;
			background: #000;
			height: 500px;
			position: relative;
			overflow: hidden;
		}

		#left-menu {
			color: #fff;
			position: absolute;
			width: 350px;
			top: 0;
			height: 100%;
			right: -300px;
			transition: all .4s;
		}

		#btn-container {
			float: left;
			width: 50px;
			position: relative;
		}

		#btn-container ul {
			position: absolute;
			width: 50px;
			top: 159px;
			left: 0;
		}

		#btn-container ul:after {
			content: '';
			visibility: hidden;
			display: block;
			clear: both;
		}

		#btn-container ul li {
			height: 60px;
			width: 100%;
			background: #363C40;
			margin-bottom: 2px;
			font-size: 16px;
			line-height: 60px;
			cursor: pointer;
			text-align: center;
			transition:all .4s;
		}

		#btn-container ul li.on {
			background: #f01400;
		}

		#btn-container ul li:hover {
			background: #f01400;
		}

		#list {
			float: right;
			width: 300px;
			background: #14191e;
			height: 100%;
		}

		#list div {
			padding-left: 10px;
		}

	</style>

	<script>
		window.onload = function() {
			var cObj = document.getElementById("btn-container");
			var cMenu = document.getElementById("left-menu");
			var btns = cObj.getElementsByTagName("li");
			
			var listFlag = false;
			btns[0].onclick = function() {
				var cls = this.className;
				if (listFlag) {
					cls = cls.replace(/\s*on\s*/gi,"");
					this.className = cls;
					listFlag = false;
					cMenu.style.right = "-300px";
				} else {
					cls += " on";
					this.className = cls;
					listFlag = true;
					cMenu.style.right = 0;
				}
			}





			var listData = {
				title: "Java眼中的XML---文件读取...",
				nodes: [
					{
						title: "第1章 与 XML 的初次邂逅",
						nodes: [
							{
								title: "1-1 初次邂逅 XML (12:13)"
							}
						]
					},
					{
						title: "第2章 应用 DOM 方式解析 XML",
						nodes: [
							{
								title: "2-1 如何进行 XML 文...(09:25)"
							},
							{
								title: "2-2 使用 DOM 解析 X...(20:05)"
							},
							{
								title: "2-3 使用 DOM 解析XML...(16:23)"
							}
						]
					},
					{
						title: "第3章 应用 SAX 方式解析 XML",
						nodes: [
							{
								title: "3-1 使用 SAX 解析 X...(12:07)"
							},
							{
								title: "3-2 使用 SAX 解析 X...(10:08)"
							},
							{
								title: "3-3 使用 SAX 解析 X...(14:20)"
							},
							{
								title: "3-4 使用 SAX 解析将...(16:33)"
							}
						]
					},
					{
						title: "第4章 应用 DOM4J 及 JDOM 方式解",
						nodes: [
							{
								title: "4-1 JDOM 开始解析前的...(09:59)"
							},
							{
								title: "4-2 应用 JDOM 解析节...(08:52)"
							},
							{
								title: "4-3 应用 JDOM 解析子...(03:22)"
							},
							{
								title: "4-4 JDOM 解析时乱码的...(05:49)"
							},
							{
								title: "4-5 在 JDOM 中存储 ...(08:21)"
							}
						]
					}
				]
			}

			var html = [];
			html.push("<h2>" + listData.title + "</h2>");
			for (var i = 0; i < listData.nodes.length; i++) {
				html.push("<dl>");
				html.push("<dt>" + listData.nodes[i].title + "</dt>");
				for (var j = 0; j < listData.nodes[i].nodes.length; j++) {
					html.push("<dd>" + listData.nodes[i].nodes[j].title + "</dd>");
				}

				html.push("</dl>");
			}

			document.getElementById("list").childNodes[1].innerHTML = html.join("");
		}
	</script>
</head>
<body>
	
	<div id="video">
		
		<div id="left-menu">
			<div id="btn-container">
				<ul>
					<li>章节</li>
					<li>笔记</li>
					<li>提问</li>
				</ul>
			</div>
			<div id="list">
				<div></div>
			</div>
		</div>

	</div>
</body>
</html>